<template>
  <div class="app-container">
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['orders:request:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['orders:request:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['orders:request:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['orders:request:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row> -->
	
	 <el-row :gutter="10" class="mb8" style="height: 30px;">
		<el-col :span="1.5">
	<!-- <div style="background-color: #fff;height: 70px;">	</div> -->
			<el-button icon="el-icon-plus" @click="handleAdd" v-hasPermi="['orders:request:add']"
				style="background-color: #00B899;color: #fff;">添加</el-button>
		</el-col>

	<el-col :span="1.5">
	<div style="margin-left: 708px;">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
		  <el-form-item label="采购申请编号" prop="purchaseRequestNumber" label-width="10">
		    <el-input
		      v-model="queryParams.purchaseRequestNumber"
		      placeholder="请输入采购申请编号"
		      clearable
		      @keyup.enter.native="handleQuery"
		    />
		  </el-form-item>
		  
		  <el-form-item>
		    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
		    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
		  </el-form-item>
		</el-form>
	</div>
	</el-col>
	</el-row>

    <el-table v-loading="loading" :data="requestList" @selection-change="handleSelectionChange" :default-sort="{ prop: 'requestDate', order: 'descending' }">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="采购申请编号" align="center" prop="purchaseRequestNumber" width="180"/>
      <el-table-column label="采购类型" align="center" width="150">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_type_purchase" :value="scope.row.purchaseType"/>
        </template>
      </el-table-column>
      <el-table-column label="申请日期" align="center" prop="requestDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
	 <!-- <el-table-column label="申请人" align="center" prop="requesterId" />
	  <el-table-column label="申请部门" align="center" width="180" /> -->
	  <el-table-column label="采购明细">
	  <el-table-column label="需求行号" width="180">
	  		<template slot-scope="scope">
	  			<div v-for="(requestnumber) in scope.row.pcmApplicationDetailList"
	  				style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center;margin: 0px 0px 15px 0px;">
	  				{{requestnumber.demandLineNumber}}
	  			</div>
	  		</template>
	  	</el-table-column>
	  	<el-table-column label="采品编号" width="180">
	  		<template slot-scope="scope">
	  			<div v-for="(requestnumber) in scope.row.pcmApplicationDetailList"
	  				style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center;margin: 0px 0px 15px 0px;">
	  				{{requestnumber.productNumber}}
	  			</div>
	  		</template>
	  </el-table-column>
	  <el-table-column label="采品名称" width="180">
	  	<template slot-scope="scope">
	  		<div v-for="(requestnumber) in scope.row.pcmApplicationDetailList"
	  			style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center;margin: 0px 0px 15px 0px;">
	  			{{requestnumber.productName}}
	  		</div>
	  	</template>
	  </el-table-column>
	  <el-table-column label="单位" width="180">
	  	<template slot-scope="scope">
	  		<div v-for="(requestnumber) in scope.row.pcmApplicationDetailList"
	  			style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center;margin: 0px 0px 15px 0px;">
	  			 <dict-tag :options="dict.type.sys_unit" :value="requestnumber.productUnit"/>
	  		</div>
	  	</template>
	  </el-table-column>
	  <el-table-column label="需求数量" width="180">
	  	<template slot-scope="scope">
	  		<div v-for="(requestnumber) in scope.row.pcmApplicationDetailList"
	  			style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center;margin: 0px 0px 15px 0px;">
	  			{{requestnumber.requiredQuantity}}
	  		</div>
	  	</template>
	  </el-table-column>
	  <el-table-column label="期望到货日期" width="180">
	  	<template slot-scope="scope">
	  		<div v-for="(requestnumber) in scope.row.pcmApplicationDetailList"
	  			style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center;margin: 0px 0px 15px 0px;">
	  			{{requestnumber.expectedDeliveryDate}}
	  		</div>
	  	</template>
	  </el-table-column>
	<!--  <el-table-column label="随机码" width="180">
	  	<template slot-scope="scope">
	  		<div v-for="(requestnumber) in scope.row.pcmApplicationDetailList"
	  			style="border-top: 1px #dfe6ec solid;width: 100%;padding: 18px 0px;text-align: center;margin: 0px 0px 15px 0px;">
	  		</div>
	  	</template>
	  </el-table-column> -->
	  </el-table-column>
	  	<!-- <el-table-column label="随机码合集" width="180"/> -->
	  	<el-table-column label="采购申请状态变更" align="center" width="180" prop="purchaseStatus">
			<template slot-scope="scope">
				<dict-tag :options="dict.type.demand_line_status" :value="scope.row.purchaseStatus" />
			</template>
		</el-table-column>
	  	 <el-table-column label="提交人" align="center" prop="sysUser.userName"/>
	  	<el-table-column label="提交时间" align="center" prop="requestDate" width="180">
	  	  <template slot-scope="scope">
	  	    <span>{{ parseTime(scope.row.requestDate, '{y}-{m}-{d}') }}</span>
	  	  </template>
	  	</el-table-column>
	  	<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
	  	  <template slot-scope="scope">
	  	    <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
	  	  </template>
	  	</el-table-column>
	  	<el-table-column label="流程状态" width="180"/>
	  	<el-table-column label="当前节点" width="180"/>
	  	<el-table-column label="当前负责人" width="180"/>
	  </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['orders:request:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['orders:request:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改采购申请对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
			<el-row :gutter="200">
			  <el-col :span="12">
			    <el-form-item label="采购申请编号" prop="requesterId" label-width="50" style="margin: 0px;line-height: 5px;"/>
			    <el-input v-model="form.requesterId" placeholder="自动生成" :disabled="true"/>
			  </el-col>
			  <el-col :span="12"> 
			    <el-form-item label="采购类型" prop="purchaseType" style="margin: 0px;"/>
				<div style="width: 40px;">
			      <el-radio-group v-model="form.purchaseType">
			        <el-radio
			          v-for="dict in dict.type.sys_type_purchase"
			          :key="dict.value"
			          :label="parseInt(dict.value)"
					  style="height: 20px;margin-top: 4px;"
			        >
			          {{ dict.label }}
			        </el-radio>
			      </el-radio-group>
				</div>
			  </el-col>
			</el-row>
			<el-row>
				<el-col :span="16">
					<el-form-item label="申请日期" prop="requestDate" label-width="50"/>
						<el-date-picker
							clearable
							v-model="form.requestDate"
							type="date"
							value-format="yyyy-MM-dd"
							placeholder="请选择申请日期"
						>
						</el-date-picker>
				</el-col>
			</el-row>
              
 
        <el-divider content-position="center">申请明细信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddPcmApplicationDetail">添加</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeletePcmApplicationDetail">删除</el-button>
          </el-col>
        </el-row>
        <el-table :data="pcmApplicationDetailList"  @selection-change="handlePcmApplicationDetailSelectionChange" ref="pcmApplicationDetail" >  
          <el-table-column type="selection" width="50" align="center" />
         <el-table-column label="需求行号" prop="index" width="150" type="index" />
		<el-table-column label="产品编号" align="center" prop="productNumber" width="180">
			  <template slot-scope="scope">
				<el-button icon="el-icon-coin" @click="record" style="border: 0px solid;"> {{ scope.row.productNumber }}</el-button>
			 </template>
		</el-table-column>
         <el-table-column label="产品名称" align="center" prop="productName" />
         <el-table-column label="单位" align="center" prop="unit">
         		<template slot-scope="scope">
         		   <dict-tag :options="dict.type.sys_unit" :value="scope.row.productUnit"/>
         		</template>
         </el-table-column>
		 
          <el-table-column label="需求数量" prop="requiredQuantity" width="150">
            <template slot-scope="scope">
              <el-input v-model="scope.row.requiredQuantity" placeholder="请输入需求数量" />
            </template>
          </el-table-column>
          <el-table-column label="期望到货日期" prop="expectedDeliveryDate" width="240">
            <template slot-scope="scope">
              <el-date-picker clearable v-model="scope.row.expectedDeliveryDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择期望到货日期" />
            </template>
          </el-table-column>
          <el-table-column label="期望供应商" prop="expectedSupplierId" width="150">
            <template slot-scope="scope">
			 <el-select v-model="scope.row.expectedSupplierId" placeholder="请选择期望供应商">
						<el-option
						  v-for="supper in supperOptions"
						  :key="supper.value"
						  :label="supper.label"
						  :value="parseInt(supper.value)"
						></el-option>
			</el-select>
             <!-- <el-select v-model="scope.row.expectedSupplierId" placeholder="请选择期望供应商">
                <el-option label="李氏集团" value="12"></el-option>
                <el-option label="阿里巴巴（中国）软件有限公司" value="20"></el-option>
              </el-select> -->
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
 
  
  
  

    <!-- 物料展示 -->
  <el-dialog :title="'选择数据'" :visible.sync="flay" width="500px" append-to-body>
   <el-table  v-loading="loadinging" :data="recordList"   ref="contactTable" border>
     <el-table-column type="selection" width="55" align="center" />
     <el-table-column label="产品编号" align="center" prop="productNumber" />
     <el-table-column label="产品名称" align="center" prop="productName" />
     <el-table-column label="单位" align="center" prop="unit">
		<template slot-scope="scope">
		   <dict-tag :options="dict.type.sys_unit" :value="scope.row.unit"/>
		</template>
     </el-table-column>
   </el-table>
  <!-- -->
    <pagination
     v-show="totaling>0"
     :total="totaling"
     :page.sync="queryParams.pageNum"
     :limit.sync="queryParams.pageSize"
     @pagination="getlistRecord"
   />
   <div slot="footer" class="dialog-footer">
     <el-button type="primary" @click="add">确 定</el-button>
     <el-button @click="cancel">取 消</el-button>
   </div>
  </el-dialog>
   </div>
</template>

<style>
	::-webkit-scrollbar {
	  width: 10px;
	  height: 15px;
	} 
	::-webkit-scrollbar-thumb{
		border-radius: 3px;
		background-color: #c1c1c1;
	}
</style>


<script>
import { listRequest, getRequest, delRequest, addRequest, updateRequest ,listRecord} from "@/api/orders/request";

export default {
  name: "Request",
  dicts: ['demand_line_status', 'sys_type_purchase', 'sys_unit'],
  data() {
    return {
		 supperOptions: [
		        { label: "李氏集团", value: "12" },
		        { label: "阿里巴巴（中国）软件有限公司", value: "100" }
		      ],
		
		selectedData:[],
	  //物料对象
	  obje: [],
	  //
	  count: null,
      // 遮罩层
      loading: true,
	  // 物料遮罩层
	  loadinging: true,
      // 选中数组
      ids: [],
	  //物料数组
	  idsing: [],
      // 子表选中数据
      checkedPcmApplicationDetail: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
	  // 物料总条数
	  totaling: 0,
      // 采购申请表格数据
      requestList: [],
	  //物料表格数据
	  recordList: [],
      // 申请明细表格数据
      pcmApplicationDetailList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
	  // 物料是否显示弹出层
	  flay: false,
      // 查询参数
      queryParams: {
	   pageNum: 1,
	   pageSize: 10,
	   purchaseRequestNumber: null,
	   purchaseType: null,
	   requestDate: null,
	   submitter: null,
	   updateTime: null,
	   purchaseStatus: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
   // this.handleAddPcmApplicationDetail();
  },
  methods: {
  add() {
    this.selectedData = this.$refs.contactTable.selection;
    this.selectedData = this.selectedData.map((item, index) => {
      return {
        ...item,
        demandLineNumber: this.count++, // 添加 name 属性到每个对象
        typePurchase: this.form.purchaseType,// 添加 sex 属性到每个对象
		productUnit: item.unit,
		applicationDate: this.form.requestDate
      };
    });
    this.pcmApplicationDetailList = this.pcmApplicationDetailList.concat(this.selectedData);
    this.pcmApplicationDetailList = this.pcmApplicationDetailList.filter(item => Object.values(item).some(value => value !== ''));
    this.flay = false;
  },
    handleAddPcmApplicationDetail() {
			this.count++;
			// 创建一个新的空对象，代表新的一行数据
		   let obj = {};
				obj.typePurchase = "";
				obj.applicationDate = "";
				obj.person = "";
				obj.productNumber = "";
				obj.productName = "";
				obj.productUnit = "";
				obj.demandLineNumber = "";
				obj.requiredQuantity = "";
				obj.expectedDeliveryDate = "";
				obj.expectedSupplierId = "";
				obj.demandLineStatus = "";
				obj.requestId = "";
				obj.inquiryDemandNumber = "";
				this.pcmApplicationDetailList.push(obj);
		
	},
	  //物料列表
	  record(){
		  this.flay=true;
		  this.getlistRecord();
	  },
	  getlistRecord(){
		  this.loadinging = true;
		  listRecord().then(response => {
		    this.recordList = response.rows;
		    this.totaling = response.total;
		    this.loadinging = false;
		  });
	  },
	  
	 //  // 物料多选框选中数据
	 //  handleSelectionChangeing(selection) {
	 //    this.idsing = selection[0];
		
	 //   console.log(this.idsing.productNumber)
	  
	 //    if (selection && selection.length > 0) {
	 //    		 this.flay=false;
	 //    	}
	 //  },
	  
    /** 查询采购申请列表 */
    getList() {
      this.loading = true;
      listRequest(this.queryParams).then(response => {
        this.requestList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
	  this.count=null;
      this.form = {
        purchaseRequestNumber: null,
        purchaseType: null,
        requestDate: null
      };
      this.pcmApplicationDetailList = [];
	  
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.purchaseRequestNumber)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加采购申请";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const purchaseRequestNumber = row.purchaseRequestNumber || this.ids
      getRequest(purchaseRequestNumber).then(response => {
        this.form = response.data;
        this.pcmApplicationDetailList = response.data.pcmApplicationDetailList;
        this.open = true;
        this.title = "修改采购申请";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
		  
        if (valid) {
          this.form.pcmApplicationDetailList = this.pcmApplicationDetailList;
          if (this.form.purchaseRequestNumber != null) {
            updateRequest(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRequest(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const purchaseRequestNumbers = row.purchaseRequestNumber || this.ids;
      this.$modal.confirm('是否确认删除采购申请编号为"' + purchaseRequestNumbers + '"的数据项？').then(function() {
        return delRequest(purchaseRequestNumbers);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	/** 申请明细序号 */
    rowPcmApplicationDetailIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 申请明细添加按钮操作 */
   //  handleAddPcmApplicationDetail() {
	  // this.count++;
   //    let obj = {};
   //    obj.typePurchase = this.form.purchaseType;
   //    obj.applicationDate = this.form.requestDate;
   //    obj.person = "";
   //    obj.productNumber = "";
   //    obj.productName = "";
   //    obj.productUnit = "";
   //    obj.demandLineNumber = this.count;
   //    obj.requiredQuantity = "";
   //    obj.expectedDeliveryDate = "";
   //    obj.expectedSupplierId = "";
   //    obj.demandLineStatus = "";
   //    obj.requestId = "";
   //    obj.inquiryDemandNumber = "";
   //    this.pcmApplicationDetailList.push(obj);
   //  },
    /** 申请明细删除按钮操作 */
    handleDeletePcmApplicationDetail() {
      if (this.checkedPcmApplicationDetail.length == 0) {
        this.$modal.msgError("请先选择要删除的申请明细数据");
      } else {
		
			this.pcmApplicationDetailList = this.pcmApplicationDetailList.filter(function(item) {
			  return !this.checkedPcmApplicationDetail.some(function(checkedItem) {
			    return checkedItem.demandLineNumber === item.demandLineNumber;
			  });
			}, this);
		
      }
    },
    /** 复选框选中数据 */
    handlePcmApplicationDetailSelectionChange(selection) {
      this.checkedPcmApplicationDetail = selection.map(item => item)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('orders/request/export', {
        ...this.queryParams
      }, `request_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>




<style scoped>
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	::v-deep .el-table .cell {
		padding: 0px;
	}

	 ::v-deep .el-table--medium .el-table__cell {
		padding: 0px;
	}

	/*::v-deep .cell div {
		height: 0px;
	} */
</style>
